<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<title>feiyi-cloudplay</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style media="screen">
  .btn-pannel
  {
    margin-top: 20%;
    width:80%;
    margin-left: auto;
    margin-right: auto;
  }
  .btn{
    width:100%;
    height:50px;
    border-radius: 10px;
    background-color: black;
    color:white;
    text-align: center;
    line-height: 50px;
    margin-bottom: 30px;
  }
</style>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="dist/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	// $("#jpId").jPlayer( {
	//   ready: function() { // The $.jPlayer.event.ready event
	//     $(this).jPlayer("setMedia", { // Set the media
	//       m4a: "m4a/English.m4a"
	//     }).jPlayer("stop"); // Attempt to auto play the media
	//   },
	//   ended: function() { // The $.jPlayer.event.ended event
	//     $(this).jPlayer("play"); // Repeat the media
	//   },
	//   supplied: "m4a"
	// });
  //
	// $("#jumpToTime").click( function() {
	//   $("#jpId").jPlayer("play", parseInt($("#time").val())); // Begins playing 42 seconds into the media.
	// });
  $('#english').click(function(){
    English();
  });

});

function English(){
  $("#cloudplay").jPlayer( {
    ready: function() { // The $.jPlayer.event.ready event
      $(this).jPlayer("setMedia", { // Set the media
        m4a: "m4a/English.m4a"
      }).jPlayer("play"); // Attempt to auto play the media
    },
    ended: function() { // The $.jPlayer.event.ended event
      $(this).jPlayer("stop"); // Repeat the media
    },
    supplied: "m4a"
  });
}

function Korean(){
  $("#cloudplay").jPlayer("setMedia", { // Set the media
    m4a: "m4a/Korean.m4a"
  }).jPlayer("play"); // Attempt to auto play the media
}

function Japanese(){
  $("#cloudplay").jPlayer("setMedia", { // Set the media
    m4a: "m4a/Japanese.m4a"
  }).jPlayer("play"); // Attempt to auto play the media
}

</script>
</head>
<body>
  <div id="cloudplay"></div>
  <div class="btn-pannel">
      <div class="btn" id="english">
        English
      </div>
      <div class="btn" id="japanese">
        日本語
      </div>
      <div class="btn" id="korean">
        한국어
      </div>
  </div>
	<center style="margin-top:20px;"><lable style="width:250px;height:50px;font-size:50px;line-height:50px;" >time:</lable><input id="time" style="width:370px;height:50px;font-size:50px;line-height:50px;"></input></center>
	<br>
	<center><div id="jumpToTime" style="width:500px;height:250px;background:black;color:white;font-size:50px;line-height:250px;">PLAY</div></center>
	<div id="jpId"></div>
</body>

</html>
